<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:svg="http://www.w3.org/2000/svg"
      xml:lang="en"
      lang="en">
<head>
    <title>Example &#187; User Interface &#187; Button</title>
    <script type="text/javascript" src="../../scripts/dd/dd.js"></script>
    <script type="text/javascript">
    dd.addModule("http");
    dd.addModule("http.latency");
    dd.addProject("http", "");
    var files = [{label:"dd.http.request",file:"request.js"},
                 {label:"dd.http.get",file:"get.js"},
                 {label:"dd.http.post",file:"post.js"},
                 {label:"dd.http.open",file:"open.js"},
                 {label:"dd.http.latency",file:"latency.js"}];
    dd(window).event({
        onResize:function()
        {
            dd("content").width = this.window.width - 4;
            dd("content").height = this.window.height - 25;
        },
        onLoad:function()
        {
            dd("content").value = "";
            dd("content").width = this.window.width - 4;
            dd("content").height = this.window.height - 25;
            dd("output").display = "none";
            for(var i in files)
            {
                var tab = dd("tab").addElement("li", files[i].label, {"id":"tab" + i});
                dd(tab).event({
                    onMouseOver:function()
                    {
                        if(!dd(this.parameters.tab).classExists("selected"))
                            dd(this.parameters.tab).addClass("hover");
                    },
                    onMouseOut:function()
                    {
                            dd(this.parameters.tab).removeClass("hover");
                    },
                    onClick:function()
                    {
                        for(var j in this.parameters.files)
                            dd("tab" + j).removeClass("selected");
                        dd(this.parameters.tab).addClass("selected");
                        dd(this.parameters.tab).removeClass("hover");
                        dd.http.open(this.parameters.file, function(){dd("content").value = this.text});
                    }
                }, {"files":files,"tab":tab,"file":files[i].file});
            }
            dd("run").event({
                onMouseOver:function()
                {
                    dd("run").addClass("hover");
                },
                onMouseOut:function()
                {
                    dd("run").removeClass("hover");
                },
                onClick:function()
                {
                    dd("output").clearElements();
                    dd("output").addElement("pre", {"id":"view"});
                    eval(dd("content").value);
                    dd("output").display = "block";
                    //dd("text").animate({"height":300}, 1000);
                }
            });
            dd("output").event({
                onClick:function()
                {
                    if(this.target.id == "output")
                    {
                        dd("output").visible = false;
                        dd("output").display = "none";
                    }
                    //dd("text").animate({"height":300,"visible":[true,false]}, 1000);
                }
            });
        }
    });
    </script>
    <style type="text/css">
    *{padding:0;margin:0;}
    html,body{height:100%;}
    body{background-color:#FFF;color:#FFF;font-family:"Segoe UI";overflow:hidden;}
    ul.tab{background:url('../../styles/tab_gradient.png') repeat-x 0 0;list-style:none;border-bottom:1px solid #B9B9B9;height:24px;}
    ul.tab li{user-select:none;-moz-user-select:none;text-shadow:0 1px 0 #FFF;cursor:default;background:url('../../styles/tab_gradient.png') repeat-x 0 0;float:left;padding:0 8px;color:#000;border-right:1px solid #B9B9B9;line-height:24px;font-size:14px;}
    ul.tab li.selected{background-position:0 -48px;}
    ul.tab li.right{float:right;}
    ul.tab li.right{line-height:0;border-right:none;border-left:1px solid #B9B9B9}
    ul.tab li.hover{background-position:0 -24px;text-shadow:0 1px 0 #F1F1F1;}
    textarea{padding:0 0 0 4px;font-family:"Consolas";font-size:14px;border:none;width:auto}
    .output{background:rgba(20, 20, 20, 0.2);height:100%;position:absolute;top:25px;left:0;width:100%;text-align:center;}
    .output pre{text-align:left;border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;margin:0 auto;width:60%;padding:10px;border-left:1px solid #FFF;border-right:1px solid #FFF;border-bottom:1px solid #FFF;background:#141414;}
    .close{user-select:none;-moz-user-select:none;cursor:default;color:#000;text-shadow:0 1px 0 #FFF;font-size:14px;background:url('../../styles/tab_gradient.png') repeat-x 0 0;width:60%;padding:2px 10px;margin:0 auto;border-left:1px solid #B9B9B9;border-right:1px solid #B9B9B9;border-bottom:1px solid #B9B9B9;}
    .close:hover{background-position:0 -24px;}
    </style>
</head>
<body>
    <ul class="tab" id="tab">
        <li id="run" class="right icon"><img src="../../styles/icon_16_play.png" alt="Run" /></li>
    </ul>
    <div class="output" id="output"></div>
    <div class="textareawrapper"><textarea id="content"></textarea></div>
</body>
</html>